<template>
  <div>
    <div>
      <div style="display: inline-block">
        <el-button icon="el-icon-back" size="small" type="text" @click="goBack">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;margin-left:10px">
          <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">{{ this.title }}</span>
        </div>
      </div>
      <div style="border-bottom: solid 1px #C9C9C9;"></div>
    </div>
    <el-container>
      <el-container style="margin-top: 10px">
        <el-aside width="140px">
          <div id="menu">
            <MenuItem v-for="item in items" :key="item.name" :item="item" @change-selection="refreshList"></MenuItem>
          </div>
        </el-aside>
        <el-container>
          <el-main :style={height:minHeight} style="padding-right: 10px">
            <el-scrollbar style="overflow-x: hidden">
              <el-row>
                <el-col :span="6">
          <span class="label">知识名称: <em
            style="color: red">*</em> </span>
                </el-col>
                <el-col :span="24">
                  <el-input v-model="examKnowledge.name" placeholder="请输入知识名称" size="small"
                            style="margin-top: 10px" width="100%"></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px">
                <el-col :span="6">
                  <span class="label">知识正文:</span>
                </el-col>
                <el-col :span="24">
                  <KindEditor :content.sync="examKnowledge.knowledgeText" placeholder="请输入知识正文" size="small"
                              :uploadPath="'examBook/' + examKnowledgeId"
                              style="margin-top: 10px"
                              width="100%"></KindEditor>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px;margin-bottom: 10px">
                <el-col :span="6">
                  <span class="label">所属大纲:</span>
                </el-col>
                <el-col :span="24">
                  <el-cascader
                    v-model="examKnowledge.outlineDetailId"
                    :options="options"
                    :props="{value: 'id', label: 'name', multiple: false, checkStrictly: true, emitPath: false}"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    style="width: 100%;margin-top: 10px"></el-cascader>
                </el-col>
              </el-row>
            </el-scrollbar>
          </el-main>
          <el-footer>
            <div style="text-align: right;margin-top: 10px">
              <el-button @click="cel()">取 消</el-button>
              <el-button type="primary" @click="saveExamKnowledge()">确 定</el-button>
            </div>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import MenuItem from "../common/MenuItem";
import KindEditor from "../kindeditor/KindEditor";

export default {
  name: "NewExamBookKnowledge",
  components: {
    KindEditor,
    MenuItem,
  },
  data() {
    return {
      examKnowledge: {},
      options: [],
      title: "",
      items: [{
        name: "知识名称",
        selected: true,
      }, {
        name: "知识正文",
        selected: false,
      }, {
        name: "关联大纲",
        selected: false,
      }],
      minHeight: "",
      examKnowledgeId: ''

    }
  },
  methods: {
    goBack() {
      this.$router.go("-1")
    },
    refreshList(item) {
      this.setAllItemsUnselected();
      this.setSelectedItem(item);
    },
    setAllItemsUnselected() {
      this.items.forEach(item => {
        item.selected = false;
      });
    },
    setSelectedItem(selectedItem) {
      this.items.forEach(item => {
        if (item.name === selectedItem.name) {
          item.selected = true;
        }
      });
    },
    cel() {
      this.$router.go("-1")
    },
    saveExamKnowledge() {
      if (UTIL.isEmpty(this.examKnowledge.name)) {
        this.$message.warning("请填写名称")
        return;
      }
      // 方便重新计算知识数量
      this.examKnowledge.examOutlineId = this.$route.query.examOutlineId
      this.axios.post('/pmph/action/examBook/saveExamKnowledge', this.examKnowledge).then((response) => {
        this.$router.go("-1")
        this.examKnowledge.name = ''
        this.examKnowledge.knowledgeText = ''
        this.examKnowledge.outlineDetailId = ''
      })
    }
  },
  created() {
    this.examKnowledgeId = this.$route.query.id
    this.minHeight = CONST.WORKSPACE_HEIGHT - 120 + 'px';
    if (this.$route.query.type === "编辑") {
      this.title = "编辑"
    } else {
      this.title = '新建'
    }
    this.axios.get('/pmph/action/examBook/selectOutlineTree', {
      params: {
        examOutlineId: this.$route.query.examOutlineId
      }
    }).then((response) => {
      this.options = response.data
    })
    this.axios.get('/pmph/action/examBook/selectExamKnowledgeById', {
      params: {
        id: this.$route.query.id
      }
    }).then((response) => {
      this.examKnowledge = response.data;

    })
    this.examKnowledge.examBookId = this.$route.query.examBookId
    this.examKnowledge.examOutlineId = this.$route.query.examOutlineId
    this.examKnowledge.outlineDetailId = this.$route.query.outlineDetailId
  },
}
</script>

<style scoped>

</style>
